<template>
	<view class="popular-list">
		<!-- 文章和视频 列表 -->
		<block v-if="current === 0 || current === 1">
			<view class="popular-item">
				<view class="popular-left">
					<view class="popular-content">是大家看法哈桑的空间发哈四大皆空崇拜你啊是大家看法哈桑打开收到付款计划</view>
					<view class="popular-time">1998-00-98</view>
				</view>
				<image class="popular-right" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
			</view>
			<view class="popular-item">
				<view class="popular-left">
					<view class="popular-content">是大家看法哈桑的空间发哈四大皆空崇拜你啊是大家看法哈桑打开收到付款计划</view>
					<view class="popular-time">1998-00-98</view>
				</view>
				<image class="popular-right" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
			</view>
		</block>
		<!-- 问答列表 -->
		<block v-if="current === 2">
			<view class="answer-item" @click="toAnswerDetail">
				<view class="answer-item-top">
					<image class="answer-item-top-head" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					<text class="answer-item-top-nickname">183746374878</text>
					<text class="answer-item-top-time">07月21日 00:15</text>
				</view>
				<view class="answer-item-content">安居客的身份哈克角色的发挥阿斯达克警方哈克是假的回复啊是大家看法哈克决定是否和</view>
			</view>
			<view class="answer-item">
				<view class="answer-item-top">
					<image class="answer-item-top-head" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					<text class="answer-item-top-nickname">183746374878</text>
					<text class="answer-item-top-time">07月21日 00:15</text>
				</view>
				<view class="answer-item-content">啊手动阀手动阀手动阀</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		current: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	methods: {
		// 跳转问答详情
		toAnswerDetail() {
			uni.navigateTo({
				url: `/pagesHome/answerDetail/answerDetail`
			});
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.popular-list {
	.popular-item {
		display: flex;
		margin-bottom: 40rpx;
		&:nth-last-of-type(1) {
			margin-bottom: 0;
		}
		.popular-left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-right: 26rpx;
			.popular-content {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 28rpx;
				color: #383b40;
				line-height: 40rpx;
			}
			.popular-time {
				font-size: 20rpx;
				color: #b7b8ba;
			}
		}
		.popular-right {
			width: 200rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}
	}
	.answer-item {
		padding-bottom: 12rpx;
		margin-bottom: 24rpx;
		border-bottom: 2rpx solid #f1f1f1;
		&:nth-last-of-type(1) {
			margin-bottom: 0;
			border: none;
		}
		.answer-item-top {
			display: flex;
			align-items: center;
			.answer-item-top-head {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}
			.answer-item-top-nickname {
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
			.answer-item-top-time {
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
				margin-left: auto;
			}
		}
		.answer-item-content {
			font-size: 24rpx;
			color: #666666;
			line-height: 22px;
		}
	}
}
</style>
